<!DOCTYPE>
<html>

<head>
  <title>Vex Glyphs</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"
    charset="utf-8"></script>
  <style type="text/css">
    body {
      padding: 20px;
      background: white;
      font-family: Caslon, Garamond, Arial, Helvetica, sans-serif;
      font-size: 18px;
      color: green;
      margin: auto;
      height: 80%;
      text-align: center;
    }

    a {
      color: #green;
      text-decoration: none;
      border-bottom: dotted 2px;
    }

    a.button {
      color: #green;
      background: #bfb;
      text-decoration: none;
      padding: 5px;
      margin: 2px;
      border: 5px solid #aea;
    }

    div#error {
      width: 60%;
      padding: 10px;
      color: red;
      background: #faa;
      border: 15px solid #d99;
    }
  </style>

  <script src="../../../build/vexflow-debug.js"></script>

  <!-- Replace font below with transform font -->
  <script src="gonville_all.js"></script>
  <script src="microtonal.js"></script>

  <script type="text/javascript">
    $(function () {
      function combineFonts({ familyName, fonts, validCodes }) {
        // Merge glyphs from each font together
        const glyphCodeToData = fonts.reduce(
          (glyphCodeToData, font) => Object.assign(glyphCodeToData, font.glyphs),
          {}
        );

        /*
        // Omit unused glyph codes. Uncomment this section to show only
        // gylphs that are used.

        for (const glyphCode of Object.keys(glyphCodeToData)) {
          if (!validCodes.includes(glyphCode)) {
            delete glyphCodeToData[glyphCode]
          }
        }
        */

        // Return a new font with combined glyph set and new familyName
        var newFont = Object.assign({}, Vex.Flow.GonvilleAll, { glyphs: glyphCodeToData, familyName });
        delete newFont.original_font_information;
        return newFont;
      }

      function drawGlyphs(font) {
        const canvas = document.getElementById("glyphs");
        const glyphs = font.getGlyphs();
        const canvasHeight = ((Object.keys(glyphs).length + 1) / (800 / (60 * 2))) * 60;

        // Retina display trick
        canvas.height = canvasHeight * 2;
        canvas.width = 800 * 2;
        canvas.style.height = canvasHeight
        canvas.style.width = 800
        var ctx = canvas.getContext("2d")
        ctx.scale(2, 2);

        ctx.font = "16px Arial";

        let x = 0;
        let y = 40;

        Object.keys(glyphs).forEach(glyphCode => {
          ctx.fillStyle = "#666";
          ctx.fillText(glyphCode, x, y);
          x += 60;

          ctx.strokeStyle = "#888";
          ctx.beginPath();
          ctx.moveTo(x - 5, y);
          ctx.lineTo(x + 5, y);
          ctx.stroke()

          ctx.beginPath();
          ctx.moveTo(x, y - 5);
          ctx.lineTo(x, y + 5);
          ctx.stroke()

          ctx.fillStyle = "green";

          try {
            var glyph = new Vex.Flow.Glyph(glyphCode, 40, { cache: false, font });
            glyph.render(ctx, x, y);
          } catch (e) {
            console.error(e);
          };

          x += 60;

          if (x >= 800) {
            x = 0;
            y += 60;
          }
        })
      }

      function generateFontString(font) {
        return (`export const Font = ${JSON.stringify(font)};`)
          .replace(/\},/g, '},\n')
          .replace(/"glyphs":\{/g, '\n"glyphs":{\n')
          .replace(/\}\}/g, '}\n}')
          .replace(/\};/, '\n};');
      }

      function populateTextArea(string) {
        $("#source").attr("value", string);

        $("#download").click(function () {
          document.location.href = 'data:application/x-javascript,' + string;
        });
      }

      // List of glyphs that we want
      const validGlyphCodes = [
        "v0", "v1", "v2", "v3", "v4", "v5", "v6", "v7", "v8", "v9", "va", "vb", "vf", "vc",
        "v10", "v11", "v18", "v1b", "v1d", "v1e", "v1f", "v22", "v23", "v25", "v26", "v27", "v28", "v2a",
        "v2d", "v2f", "v30", "v33", "v38", "v3b", "v3c", "v3e", "v3f", "v40", "v41", "v42", "v43", "v44",
        "v45", "v46", "v47", "v49", "v4a", "v4d", "v4e", "v52", "v54", "v55", "v58", "v59", "v5b", "v5c",
        "v62", "v70", "v72", "v74", "v75", "v79", "v7c", "v7d", "v7f", "v80", "v81", "v83", "v84", "v8b",
        "v8c", "v8f", "v92", "v93", "v94", "v95", "v97", "v9a", "v9b", "v9c", "vaa", "va3", "va5", "va9",
        "vad", "vb6", "vb3", "vb9", "vba", "vbf", "vc3",

        // Microtonal
        // db
        "v9e",
        // d
        "vab",
        // bb/
        "v90",
        // ++
        "v51",
        // +
        "v78",
        "v7a",
        "v8d",
        "vb7",
        "v39",

        // Pedal Open
        "v36",
        // Pedal close
        "v5d",
        // Caesura straight
        "v34",
        // Caesura curved
        "v4b",
        // Breath
        "v6c",
        // Tick
        "v6f",
        // Marcato
        "v5a",
        // Marcato Inverted
        "v8a",
        // Turn
        "v72",
        // Turn inverted
        "v33",
        // Mordent inverted
        "v45",
        // upprall
        "v60",
        // downprall
        "vb4",
        // prallup
        "v6d",
        // pralldown
        "v2c",
        // upmordent
        "v29",
        // downmordent
        "v68",
        // lineprall
        "v20",
        // prall
        "v1e",
        // prallprall
        "v86",
        // breve
        "v53",
        // breve rest
        "v31",
        // dynamics letter r
        "vb1",
        // sori (microtonal accidental)
        "vd0",
        // koron (microtonal accidental)
        "vd1",
      ];

      var newFont = combineFonts({
        familyName: 'VexFlow-18',
        fonts: [Vex.Flow.GonvilleAll, Vex.Flow.Microtonal],
        validCodes: validGlyphCodes,
      });

      const font = new Vex.Flow.Font('Gonville', {}, newFont);

      drawGlyphs(font);
      populateTextArea(generateFontString(newFont));
    });
  </script>
</head>

<body>
  <h1>Vex Glyphs</h1>
  <p>
    <em>Cross indicates render coordinates.</em>
  </p>
  <canvas id="glyphs">HTML5 Canvas not supported on this browser.</canvas>
  <p>
    <h3>Glyph Code</h3>
    <a href="#" id="download">Download</a>
    <p />
    <textarea id="source" style="width:800; height:200"></textarea>
    <p>
      For more information visit <a href="http://0xfe.blogspot.com">0xfe.blogspot.com</a>.
    </p>
</body>

</html>